﻿@{
    ViewBag.Title = "Home Page";
}
@section featured {
    <section class="featured">
        <div class="content-wrapper">
            <hgroup class="title">
                <h1>QUICK SEARCH FOR PLANT</h1>
                <h2>What plant would you like to hire?</h2>
            </hgroup>
            <style>
                .quicksearch {
                    padding: 10px 50px;
                    width: 300px;
                    margin: 0 auto;
                }


                    .quicksearch input[type=text] {
                        width: 100%;
                    }

                    .quicksearch select {
                        padding: 5px;
                        width: 100%;
                    }

                    .quicksearch h2 {
                        color: white;
                        font-weight: normal;
                    }
            </style>
            <div class="quicksearch">
                <h2>PLANT</h2>
                @Html.DropDownList("PlantTypeId", "Select plant")

                <h2>SUBCATEGORY</h2>
                <select id="Subcategory" name="Subcategory">
                    <option>Subcategory...</option>
                </select>

                <h2>SIZE / MODEL</h2>
                <select id="SizeModel" name="SizeModel">
                    <option>Size / Model...</option>
                </select>


                <h2>LOCATION</h2>
                <input id="Location" name="Location" type="text" />
            </div>
            <script>
                $(document).ready(function () {
                    bindAjaxLoad($('#PlantTypeId'), $('#Subcategory'), 'GetAllSubcategory', 'SubcategoryId', 'Name');
                    bindAjaxLoad($('#Subcategory'), $('#SizeModel'), 'GetAllSizeModel', 'SizeModeId', 'Value');
                });

                function bindAjaxLoad(control, target, url, key, val) {
                    control.change(function () {
                        target.find('option').remove();
                        target.append('<option>Loading...</option>');
                        var obj = $(this);
                        $.ajax({
                            url: 'Ajax/' + url,
                            type: 'POST',
                            dataType: 'json',
                            data: { data: obj.val() }
                        }).done(function (json) {
                            console.log(json);
                            target.find('option').remove();
                            target.append('<option>Select...</option>');
                            for (i = 0; i < json.length; i++) {
                                target.append('<option value=' + json[i][key] + '>' + json[i][val] + '</option>');
                            }
                        });
                    });
                }
            </script>
        </div>
    </section>
}
<h3>We suggest the following:</h3>
<ol class="round">
    <li class="one">
        <h5>Getting Started</h5>
        ASP.NET MVC gives you a powerful, patterns-based way to build dynamic websites that
        enables a clean separation of concerns and that gives you full control over markup
        for enjoyable, agile development. ASP.NET MVC includes many features that enable
        fast, TDD-friendly development for creating sophisticated applications that use
        the latest web standards.
        <a href="http://go.microsoft.com/fwlink/?LinkId=245151">Learn more…</a>
    </li>

    <li class="two">
        <h5>Add NuGet packages and jump-start your coding</h5>
        NuGet makes it easy to install and update free libraries and tools.
        <a href="http://go.microsoft.com/fwlink/?LinkId=245153">Learn more…</a>
    </li>

    <li class="three">
        <h5>Find Web Hosting</h5>
        You can easily find a web hosting company that offers the right mix of features
        and price for your applications.
        <a href="http://go.microsoft.com/fwlink/?LinkId=245157">Learn more…</a>
    </li>
</ol>
